<template>
  <div>
    <el-dialog
      :title="title"
      v-model="visable"
      width="40%"
      :close-on-click-modal="false"
      :draggable="true"
      style="max-width: 500px;"
    >
      <div class="bs-dialog">
        <el-form
          ref="addRef"
          :model="dialogFormData"
          :rules="dialogFormRules"
          label-width="auto"
          style="width: 95%;padding-left: 5%;text-align: left;"
        >
        <el-form-item label="分红日期:" prop="tradeDate">
          <el-date-picker
            style="width:46%;float: left;"
            v-model="dialogFormData.dateStart"
            type="date"
            placeholder="请选择练习分红开始日期"
            size="small"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDateStart"
            />
            <span>
                <svg t="1758243204848" class="icon" style="vertical-align: middle;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5276" 
                    width="1.4em" height="1.4em"><path d="M359.354037 457.937888c-3.180124 9.540373-12.720497 15.900621-22.260869 19.080746-9.540373 3.180124-19.080745 3.180124-25.440994 0s-12.720497-9.540373-15.900621-19.080746c-3.180124-9.540373-3.180124-22.26087 3.180124-38.16149 3.180124-12.720497 9.540373-22.26087 19.080745-34.981367 6.360248-9.540373 15.900621-19.080745 25.440994-28.621118s22.26087-15.900621 34.981367-19.080745c12.720497-6.360248 28.621118-6.360248 47.701863-6.360249 25.440994 0 44.521739 6.360248 57.242236 15.900621 12.720497 9.540373 28.621118 22.26087 38.161491 31.801243 12.720497 12.720497 22.26087 22.26087 34.981366 31.801242 12.720497 9.540373 31.801242 15.900621 54.062112 12.720497 15.900621 0 28.621118-3.180124 38.161491-9.540373s19.080745-12.720497 25.440993-19.080745 9.540373-15.900621 12.720497-22.26087 3.180124-15.900621 6.360249-22.260869c0-9.540373 6.360248-19.080745 12.720497-22.26087 6.360248-3.180124 15.900621-6.360248 22.260869-6.360248 9.540373 0 15.900621 3.180124 22.26087 9.540372 6.360248 6.360248 9.540373 12.720497 9.540372 22.26087s-3.180124 22.26087-6.360248 38.161491-12.720497 31.801242-22.26087 47.701863c-12.720497 15.900621-25.440994 28.621118-44.521739 41.341615-19.080745 12.720497-44.521739 15.900621-73.142857 15.900621-28.621118 0-50.881988-3.180124-69.962733-12.720497-19.080745-9.540373-31.801242-19.080745-44.521739-31.801242l-31.801242-31.801242c-9.540373-9.540373-22.26087-15.900621-34.981367-15.900622-9.540373 0-19.080745 0-25.440993 3.180125-6.360248 3.180124-12.720497 9.540373-19.080746 12.720497-6.360248 6.360248-9.540373 12.720497-12.720497 19.080745-9.540373 9.540373-12.720497 15.900621-15.900621 19.080745z" 
                    fill="#8a8a8a" p-id="5277"></path></svg>
            </span>
            <el-date-picker
              style="width:47%;float: right;"
              v-model="dialogFormData.dateEnd"
              type="date"
              placeholder="请选择分红结束日期"
              size="small"
              value-format="YYYY-MM-DD"
              :disabled-date="disabledDateEnd"
            />
        </el-form-item>
        <el-form-item label="现金:" prop="cash">
          <el-input-number v-model="dialogFormData.cash" placeholder="请输入现金"  clearable/>
        </el-form-item>
        <el-form-item label="重心币份额:" prop="coreCoin">
          <el-input-number v-model="dialogFormData.coreCoin" placeholder="请输入重心币份额"  clearable/>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input v-model="dialogFormData.remark" type="textarea" :rows="4" placeholder="请输入备注"  clearable />
        </el-form-item>
      </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer" style="text-align: right;margin-right: 7%;">
          <el-button  size="small" @click="visable = false"> 取消 </el-button>
          <el-button  size="small" type="primary" @click="save"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { updateItem, addItem, getItemByID } from '@/api/oss/dividendManage.js'
let orgDialogFormData = {
        id: undefined,
        dateStart:undefined,
        dateEnd:undefined,
        cash:undefined,
        coreCoin:undefined,
        remark:undefined,
      }
export default {
  data() {
    return {
      title:"",
      visable: false,
      dialogFormData: { ...orgDialogFormData},
      dialogFormRules: {
        dateStart: [
          { required: true, message: '请选择开始日期', trigger: ['blur', 'change'] },
        ],
        dateEnd: [
          { required: true, message: '请选择开始日期', trigger: ['blur', 'change'] },
        ],
      },
    }
  },
  methods: {
    // 禁止选择的日期
    disabledDateStart(date){
        if (this.isNotBlank(this.dialogFormData.dateEnd)) {
            let end = new Date(this.dialogFormData.dateEnd)
            return date.getTime() > end.getTime();
        } else {
            return false
        }
    },
    // 禁止选择的日期
    disabledDateEnd(date){
        if (this.isNotBlank(this.dialogFormData.dateStart)) {
            let start = new Date(this.dialogFormData.dateStart)
            date.setDate(date.getDate()+1)
            return date.getTime() < start.getTime();
        } else {
            return false
        }
    },
    openModal(id) {
      console.log("openModal=",id);
      this.visable = true
      this.$nextTick(() => {
        this.dialogFormData = {...orgDialogFormData}
        if (this.isNotBlank(id)) {
          this.title = '修改当期分红'
          // 获取修改的信息
          getItemByID({ 'id': id }).then(res => {
            console.log("修改返回值=",res);
            if (res.code === 1) {
              this.dialogFormData = {...res.data}
            }
          })
        } else {
          this.title = '新增当期分红'
        }
      })
    },
    
    // 保存
    save() {
      this.$refs['addRef'].validate((valid) => {
        if (valid) {
          if (this.isBlank(this.dialogFormData.id)) {
            addItem(this.dialogFormData).then(res => {
              if (res.code == 1) {
                this.$message.success('操作成功')
                this.visable = false
                // 刷新父组件中的表格数据
                this.$emit('flushTable', {})
              } else {
                this.$message.error(res.msg)
              }
            }).catch((error) => {
            })
          } else {
            updateItem(this.dialogFormData).then(res => {
              if (res.code == 1) {
                this.$message.success('操作成功')
                this.visable = false
                // 刷新父组件中的表格数据
                this.$emit('flushTable', {})
              } else {
                this.$message.error(res.msg)
              }
            }).catch((error) => {
            })
          }
          

        }
      })
    },

  }
}
</script>
<style scoped>
  :deep(.el-form-item__content) {
    display: inline-block;
    text-align: left;
    padding-right: 10%;
  }
  :deep(.el-drawer__title) {
    text-align: left;
  }
  :deep(.el-input),
  :deep(.el-input-number--small),
  :deep(.el-select) {
    width: 100%;
  }
</style>
